<template>
  <view class="page-bg">
    <!-- 警告提示 -->
    <view class="alert-box">
      <u-icon name="warning-fill" color="#fa5151" size="24" style="margin-right: 10rpx;" />
      <text class="alert-text">您的账号因违规已被列入黑名单，部分功能受到限制。请选择具体违规案例并提交申诉。</text>
    </view>

    <!-- 账号信息 -->
    <!-- <view class="card">
      <view class="card-title">账号信息</view>
      <view class="info-item">
        <text class="label">账号名称</text>
        <text class="value">{{userInfo.empName}}</text>
      </view>
      <view class="info-item">
        <text class="label">手机号</text>
        <text class="value">{{userInfo.phonenumber}}</text>
      </view>
      <view class="info-item">
        <text class="label">加入时间</text>
        <text class="value">{{userInfo.createTime}}</text>
      </view>
      <view class="info-item">
        <text class="label">拉黑时间</text>
        <text class="value" style="color: #fa5151;">{{2024-09-15 14:30}}</text>
      </view>
      <view class="info-item">
        <text class="label">累计违规次数</text>
        <text class="value" style="color: #fa5151;">3次</text>
      </view>
    </view> -->

    <!-- 关联违规案例 -->
    <view class="card">
      <view class="card-title">* 关联违规案例</view>
      <view class="search-box">
        <u-icon name="search" color="#888" size="24" style="margin-right: 10rpx;" />
        <input type="text" @input="searchCase" placeholder="搜索案例ID或内容关键词" />
      </view>
      <view class="case-list">
        <view class="case-item" v-for="(caseItem, index) in caseList" :key="index">
          <view class="case-header">
            <text class="case-status">违规案例</text>
            <text class="case-id">案例ID: {{ caseItem.violationCode }}</text>
            <text class="case-time">{{ caseItem.createTime }}</text>
          </view>
          <view class="case-content">
            <view class="case-title">{{ caseItem.violationName }}</view>
            <view class="case-type">违规类型: {{ getBotLabel(caseItem.violationType) }}</view>
          </view>
          <view class="case-action">
            <text class="action-link" @click="toDetail(caseItem)" >查看详情</text>
            <up-checkbox @change="handleCheckboxChange(caseItem)" :checked="caseItem.id== selectedCase " usedAlone :name="caseItem.id"  shape="circle" />
          </view>
        </view>
      </view>
      <view class="case-tip">
        请选择导致账号被拉黑的核心违规案例，可点击“查看详情”了解具体违规内容和判定依据
      </view>
    </view>

    <!-- 反馈内容 -->
    <view class="card">
      <view class="card-title">反馈内容</view>
      <view class="feedback-question">
        您认为该案例被误判的原因是？
      </view>
      <view class="radio-group">
        <up-radio-group v-model="reason" placement="column">
          <up-radio name="内容被误解，属于正常行业资料分享" label="内容被误解，属于正常行业资料分享" />
          <up-radio name="不适用该违规条款，政策理解有偏差" label="不适用该违规条款，政策理解有偏差" />
          <up-radio name="系统误判，内容符合平台规范" label="系统误判，内容符合平台规范" />
          <up-radio name="其他原因" label="其他原因" />
        </up-radio-group>
      </view>
      <view class="textarea-box">
        <view class="textarea-label">* 针对该案例的详细说明</view>
        <textarea class="textarea-input" v-model="detailDescription" placeholder="请针对所选案例详细说明您的情况，包括为什么认为是误判、相关依据等..." maxlength="500" />
        <view class="char-count">{{ detailDescription.length }}/500</view>
      </view>
    </view>

    <!-- 上传证明材料 -->
    <view class="card">
      <view class="card-title">上传证明材料（选填）</view>
      <view class="upload-box">
        <up-upload 
          :fileList="fileList1" 
          @afterRead="afterRead" 
          @delete="deletePic" 
          name="1" 
          multiple 
          :maxCount="3"
          :fileSizeLimit="10 * 1024 * 1024"
        >
          <view class="upload-placeholder">
            <u-icon name="plus" size="48" color="#888" />
            <!-- <text class="upload-text">上传相关截图、证明文件等</text> -->
          </view>
        </up-upload>
      </view>
      <view class="upload-tip">
        可上传相关截图、证明文件等，支持JPG、PNG、PDF格式，最多上传3个文件
      </view>
    </view>

    <!-- 提交说明 -->
    <view class="card">
      <view class="card-title">提交说明</view>
      <view class="notice-list">
        <view class="notice-item">
          <up-icon name="checkmark-circle-fill" color="#3a7afe" size="16" style="margin-right: 10rpx;" />
          <view>提交申诉后，我们将在3-5个工作日内进行审核</view>
        </view>
        <view class="notice-item">
          <up-icon name="checkmark-circle-fill" color="#3a7afe" size="16" style="margin-right: 10rpx;" />
          <view>审核结果将通过短信或站内信通知您</view>
        </view>
        <view class="notice-item">
          <up-icon name="checkmark-circle-fill" color="#3a7afe" size="16" style="margin-right: 10rpx;" />
          <view>请如实填写信息，提供虚假信息可能导致账号永久封禁</view>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn-wrap">
      <button class="submit-btn" @click="submitFeedback">提交反馈</button>
    </view>
  </view>
</template>

<script setup>
import { ref ,onMounted} from 'vue'
import {imgUrl,baseUrl} from '@/config/index.js'
import {getEmployeeInfo,getCaseList,getDict,addFeedback,getFeedbackInfo,updateFeedback} from '@/api/index'
import {onLoad} from '@dcloudio/uni-app'
onLoad((options)=>{
  if(options.id){
    feedbackId.value=options.id
    getFeedbackInfo({id: options.id}).then(res=>{
      selectedCase.value=res.data.caseId
      reason.value=res.data.feedbackType
      detailDescription.value=res.data.feedbackContent
      fileList1.value=res.data.materialImages.split(',').map(i=>{
        return {
            status: 'success',
            message: '',
            url: imgUrl + i,
          }
      })
      fileList2.value=res.data.materialImages.split(',').map(i=>{
        return {
            status: 'success',
            message: '',
            url: i,
          }
      })
    })
  }
})
let feedbackId=ref('')
let userInfo = ref({})
let actionTypes = ref([])
onMounted(()=>{
  getDict('bot_type').then(res=>{
    console.log(res);
    actionTypes.value = res.data
  })
  getEmployeeInfo().then(res=>{
    console.log(res);
    if(res.code==200){
      console.log(res);
      userInfo.value = res.data
    }
  })
  getCaseList().then(res=>{
    if(res.code==200){
      caseList.value = res.rows
    }
  })

})

const searchCase = (event) => {
  console.log(event.detail.value);
  getCaseList({searchValue:event.detail.value}).then(res=>{
    if(res.code==200){
      caseList.value = res.rows
    }
  })
}
const caseList = ref([])
const toDetail = (item) => {
  uni.navigateTo({ url: `/pages/blacklist/detail?id=${item.blackListId}` })
}
const getBotLabel=(type)=>{ 
  let index=actionTypes.value.findIndex(i=>i.dictValue==type)
  return index>-1?actionTypes.value[index].dictLabel:''
}
const selectedCase = ref('')
const reason = ref('')
const detailDescription = ref('')
const fileList1 = ref([])
const fileList2 = ref([])

const handleCheckboxChange = (item) => {
  selectedCase.value = item.id
}

// 删除图片
const deletePic = (event) => {
  fileList1.value.splice(event.index, 1)
  fileList2.value.splice(event.index, 1)
}

// 新增图片
const afterRead = async (event) => {
  let lists = [].concat(event.file)
  let fileListLen = fileList1.value.length

  lists.map((item) => {
    fileList1.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    })
  })

  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url)
    let item = fileList1.value[fileListLen]
    fileList1.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: imgUrl + result,
    })
    fileList2.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result,
    })
    fileListLen++
  }
}
const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: baseUrl+'common/upload', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      formData: {
        user: '',
      },
      success: (res) => {
        console.log(res);
        let url=JSON.parse(res.data).fileName
        resolve(url);
        // setTimeout(() => {
        // }, 1000);
      },
    });
  });
};
const submitFeedback = () => {
  if (selectedCase.value == '') {
    uni.showToast({ title: '请选择违规案例', icon: 'none' })
    return
  }
  
  if (!reason.value) {
    uni.showToast({ title: '请选择误判原因', icon: 'none' })
    return
  }
  if (!detailDescription.value) {
    uni.showToast({ title: '请输入详细描述', icon: 'none' })
    return
  }

  if(feedbackId.value){
    updateFeedback({
      id:feedbackId.value,
      caseId:selectedCase.value,
      feedbackType:reason.value,
      feedbackContent:detailDescription.value,
      materialImages: fileList2.value.map(f => f.url).join(',')
    }).then(res=>{
      if(res.code==200){
        uni.showToast({ title: '提交成功', icon: 'success' })
        setTimeout(()=>{
          uni.navigateBack()
        },1500)
      }else{
        uni.showToast({ title: res.msg, icon: 'none' })
      }
  
    })
  }else{
    addFeedback({
      caseId:selectedCase.value,
      feedbackType:reason.value,
      feedbackContent:detailDescription.value,
      materialImages: fileList2.value.map(f => f.url).join(',')
    }).then(res=>{
      if(res.code==200){
        uni.showToast({ title: '提交成功', icon: 'success' })
        setTimeout(()=>{
          uni.navigateBack()
        },1500)
      }else{
        uni.showToast({ title: res.msg, icon: 'none' })
      }
  
    })
  }
}
</script>

<style scoped>
.page-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 150rpx;
}

.alert-box {
  background: #fff;
  border-radius: 18rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.alert-text {
  color: #fa5151;
  font-size: 28rpx;
}

.card {
  background: #fff;
  border-radius: 18rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 28rpx 24rpx 18rpx 24rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
  box-sizing: border-box;
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 18rpx;
  display: flex;
  align-items: center;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.label {
  font-size: 26rpx;
  color: #222;
  font-weight: 500;
}

.value {
  font-size: 26rpx;
  color: #333;
}

.search-box {
  display: flex;
  align-items: center;
  background: #f7f8fa;
  border-radius: 12rpx;
  padding: 18rpx 20rpx;
  margin-bottom: 24rpx;
}

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 28rpx;
  color: #333;
}

.case-list {
  max-height: 400rpx;
  overflow-y: auto;
}

.case-item {
  background: #f7f8fa;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  border: 1rpx solid #e5e5e5;
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.case-status {
  background: #ffeaea;
  color: #fa5151;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  white-space: nowrap;
}

.case-id, .case-time {
  font-size: 24rpx;
  color: #888;
  white-space: nowrap;
}

.case-content {
  margin-bottom: 12rpx;
}

.case-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.case-type {
  font-size: 24rpx;
  color: #666;
}

.case-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-link {
  color: #3a7afe;
  font-size: 24rpx;
  text-decoration: underline;
}

.feedback-question {
  font-size: 28rpx;
  color: #222;
  margin-bottom: 24rpx;
}

.radio-group {
  margin-bottom: 24rpx;
}

.textarea-box {
  margin-bottom: 24rpx;
}

.textarea-label {
  font-size: 26rpx;
  color: #222;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.textarea-input {
  width: 100%;
  min-height: 120rpx;
  background: #f7f8fa;
  border-radius: 12rpx;
  border: none;
  padding: 18rpx 20rpx;
  font-size: 28rpx;
  color: #333;
  resize: none;
}

.char-count {
  font-size: 22rpx;
  color: #b0b3bb;
  text-align: right;
  margin-top: 8rpx;
}

.upload-box {
  margin: 18rpx 0 18rpx 0;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  background: #f7f8fa;
}

.upload-text {
  font-size: 24rpx;
  color: #888;
  margin-top: 12rpx;
}

.upload-tip {
  font-size: 22rpx;
  color: #b0b3bb;
  margin-top: 12rpx;
}

.notice-list {
  margin-top: 12rpx;
}

.notice-item {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  font-size: 26rpx;
  color: #4a4a4a;
  gap: 10rpx;
}

.submit-btn-wrap {
  width: 100%;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 20rpx 24rpx 40rpx;
  box-sizing: border-box;
  z-index: 999;
}

.submit-btn {
  width: 100%;
  background: #2156f3;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.case-tip{
  font-size: 20rpx;
  color: #b0b3bb;
}
</style>